<template>
    <div class="placeanorder">
        <el-dialog v-model="open" title="PlaceAnOrder" width="78%" align="left" style="position: relative;" draggable>
            <div class="flex aic" style="height:50px">
                <span>OrderID:{{ orderName }}</span>
                <span class="ml-20">Sales:Linda</span>
                <span class="ml-20">Money:$13680</span>
                <div class="ml-20" v-if="radio == '1'">
                    <span>Set up purchase:</span>
                    <el-select v-model="purcharse" @change="changePur">
                        <el-option v-for="item in buyerList" :key="item.id" :label="item.name"
                            :value="`${item.id}|${item.name}`" />
                    </el-select>
                </div>

            </div>
            <el-radio-group v-model="radio" @change="changeRadio" class="ml-4">
                <el-radio label="2" size="large"> Partial order </el-radio>
                <el-radio label="1" size="large"> Full order </el-radio>
            </el-radio-group>

            <el-table ref="multipleTableRef" :data="orderDetails" @selection-change="selectAll" height="400"
                style="width:100%;">
                <el-table-column type="selection" width="30" />
                <el-table-column fixed prop="product_name_pi" label="Model" />
                <el-table-column prop="Brand_name" label="Brand" />
                <el-table-column prop="price" label="Price" />
                <el-table-column prop="quantity" label="Qty 数量" />
                <el-table-column prop="hqty" label="HQty 已" />
                <el-table-column v-if="radio == '2'" prop=" pqty" label="PQty 部">
                    <template v-slot="pqty">
                        <el-input :disabled="pqty.row.quantity == pqty.row.hqty ? true : false" v-model="pqty.row.pqty"
                            placeholder="请输入订货数量" />
                    </template>
                </el-table-column>
                <el-table-column prop="" label="Purchaser">
                    <template v-slot="purcharse">
                        <el-select v-model="purcharse.row.purcharse">
                            <el-option v-for="item in buyerList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="Amount" />
                <el-table-column label="Weight" />

                <el-table-column prop="leadingtime" label="Leading Time" />
                <el-table-column prop="State" label="State" />
            </el-table>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="takeadd" type="primary"
                        style="border:1px solid #6193D2;color:#ffffff">confirm</el-button>
                    <el-button @click="closeWindow"
                        style="border:1px solid #6193D2;background-color:#ffffff;color:#6193D2">Cancel</el-button>
                </span>
            </template>
        </el-dialog>
    </div>

</template>
  
<script  setup>

import { ref } from 'vue'
const multipleTableRef = ref()
const open = ref(false)
const radio = ref('2')
const dialogopen = () => {
    open.value = true
}
const purcharse = ref('')
//采购设置后将列表所有数据项更改
const changePur = (x) => {
    emits('changePur', x)
}
// 全部订货全选
const allList = ref([])
const selectAll = (val) => {
    allList.value = val

}
// 切换发货类型
const changeRadio = (x) => {
    emits('changeRadio', x)
    x == 1 ? toggleSelection(props.orderDetails.filter(item => item.quantity - item.hqty > 0)) : toggleSelection()
}
const toggleSelection = (rows) => {
    if (rows) {
        rows.forEach((row) => {
            multipleTableRef.value.toggleRowSelection(row)
        })

    } else {
        multipleTableRef.value.clearSelection()
    }

}
// 创建采购任务
const takeadd = () => {
    emits('purchaseOrderteskAdd', allList.value, (radio.value === '1' ? 1 : 2))
}
const closeWindow = () => {
    open.value = false
}
const emits = defineEmits(['changePur', 'purchaseOrderteskAdd', 'changeRadio'])
const props = defineProps({
    orderName: String,
    orderDetails: Object,
    buyerList: Object
})
defineExpose(
    {
        open,
        allList,
        purcharse,

        dialogopen
    }
)
</script>
<style lang="less">
.placeanorder {
    .el-dialog__body {
        padding-top: 5px;
    }
}
</style>